<template>
    <div style="margin-top: 1rem;margin-left: 4rem;">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
            <el-form-item label="标题:" prop="title">
                <el-input v-model="ruleForm.title" />
            </el-form-item>
            <el-form-item label="内容：" prop="content">
                <el-input v-model="ruleForm.content" type="textarea" />
            </el-form-item>

            <el-form-item label="接收人:" prop="receiveUserIds">
                <el-input v-model="ruleForm.receiveUserIds" />
            </el-form-item>
            <el-form-item style="margin-left: 4rem;">
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    发送
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { Subjectadd ,type SubjectaddType} from '@/api/fasong'
interface RuleForm {
    title: string
    content: string
    receiveUserIds:string
}
const ruleForm = ref<RuleForm>({
    title: '',
    content:'',
    receiveUserIds:""
})
const rules = ref<FormRules<SubjectaddType>>({
    title: [
        { required: true, message: '请输入标题', trigger: 'blur' },
    ],
    content: [
        { required: true, message: '请输入内容', trigger: 'blur' },
    ],
     receiveUserIds: [
        { required: true, message: '请输入接收人', trigger: 'blur' },
    ],
})
const ruleFormRef = ref<FormInstance>()
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log(ruleForm.value);  
            console.log('submit!')
            Subjectadd(ruleForm.value).then(res=>{
                if (res.code===1) {
                    ElMessage({
                        message:"发送成功",
                        type:"success",
                        duration:1500,
                    })
                }else{
                    ElMessage({
                        message:res.message,
                        type:"error"
                    })
                }
            })
        } 
    })
}
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

</script>